import styles from './index.module.scss'
import { NavBar, TextArea } from 'antd-mobile'
import { useState } from 'react'
import { useStore } from '@/store'
import { useSearchParams } from 'react-router-dom'

type Props = {
  closePopup?: () => void
}
export default function CommentInput({ closePopup }: Props) {
  // 收集表单数据
  const [value, setValue] = useState('')
  const onChange = (value: string) => {
    setValue(value)
  }
  // 调用接口
  const { commentStore } = useStore()
  const [params] = useSearchParams()
  const id = params.get('id')
  const submit = async () => {
    if (id) {
      await commentStore.addComment(id, value)
      // 关闭弹框
      closePopup && closePopup()
      // 清空表单
      setValue('')
    }
  }

  return (
    <div className={styles.root}>
      <NavBar
        onBack={closePopup}
        right={
          <span onClick={submit} className="publish">
            发表
          </span>
        }>
        {'评论文章'}
      </NavBar>
      <div className="input-area">
        {/* 评论内容输入框 */}
        <TextArea
          value={value}
          onChange={onChange}
          placeholder="说点什么~"
          rows={10}
        />
      </div>
    </div>
  )
}
